<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Cloud Config</title>

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>

    <link href="lib/metro-bootstrap/css/metro-bootstrap.min.css" rel="stylesheet"/>

    <link href="css/pkg.css" rel="stylesheet"/>


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1 envs" id="envDiv" >
                <v-template v-if="envs.length>0">
                    <div class="col-md-12 env" v-for="env in envs">
                        <div class="env-item" >
                            <p>环境名称：{{env.envName}}</p>
                            <p>配置信息：{{env.envConfigs}}</p>
                            <p>发布环境：{{env.deployServers}}</p>
                            <button @click="pkg(env.envName)">开始打包</button>
                            <!--<p><button @click="showConfig(env.envName)">查看配置</button></p>
                            <p></p>-->
                        </div>
                        <!--<div class="" style="w">

                        </div>-->
                        <div :id="env.envName+'ProgressBar'" style="height: 100px;">

                        </div>
                    </div>
                </v-template>
            </div>

            <div class="col-md-8 col-md-offset-2" style="margin-top: 100px;">



            </div>
        </div>
    </div>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/raphael/raphael.min.js"></script>
    <script src="lib/progressStep/progressStep.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <!--vivus-->
    <script src="lib/vivus/vivus.min.js"></script>
    <!--lodash-->
    <script src="lib/lodash/lodash.min.js"></script>
    <!--vue-->
    <script src="lib/vue/vue.min.js"></script>

    <script src="js/common.js"></script>
    <script>
        //包全名
        var pkgFullName = getQueryString("pkgFullName");

        var envDivApp = new Vue({
            el:"#envDiv",
            data:{
                envs:[],
                processBars:{}
            },
            created:function(){
                var that = this;
                var keyName = pkgFullName.substr(0,pkgFullName.lastIndexOf("."));
                $.ajax({
                    url:serverUrl+rootPath+"/env/list/"+keyName,
                    asnyc:true,
                    dataType:"json",
                    crossDomain:true,
                    data:null,
                    type:"get",
                    success:function(data){
                        that.envs = data;
                    }

                });
            },
            methods:{
                getEnvs:function(){

                },
                initProgressBar:function(envName){
                    var obj = $("#"+envName+"ProgressBar").progressStep();
                    obj.addStep("处理配置");
                    obj.addStep("解压修改");
                    obj.addStep("生成新包");
                    obj.addStep("清理环境");
                    obj.refreshLayout();
                },
                pkg:function(envName){
                    this.initProgressBar(envName);
                }
            }
        });

        /*var $progressDiv = $("#progressBar");
        var $progressBar = $progressDiv.progressStep();
        $progressBar.addStep("处理配置");
        $progressBar.addStep("解压修改");
        $progressBar.addStep("生成新包");
        $progressBar.addStep("清理环境");
        $progressBar.refreshLayout();
        $progressBar.setCurrentStep(1);*/

    </script>
</body>
</html>